<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/static/img/panda.ico">

  <title>cmdb管理平台</title>
  <!-- Bootstrap core CSS -->
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/static/css/dashboard.css" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">CMDB管理平台</a>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li class="active"><a href="#">主机管理</a></li>
          <li><a href="#">用户管理</a></li>
          <li><a href="#">日志管理</a></li>
          <li><a href="#">权限管理</a></li>
        </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">控制台</h1>
        <h2 class="sub-header">主机管理</h2>
        <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">添加主机</button>
        <div class="table-responsive">
          <!-- 模态框结构 -->
          <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                  <div class="modal-content">
                      <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                      aria-hidden="true">×</span></button>
                  <h4 class="modal-title">添加主机</h4>
                </div>
                     <div class="modal-body">
                  <!-- 此处是在模态框中显示的内容 -->
                  <form action="./1.py" method="GET">
                      <div class="form-group">
                      <label for="hostname">主机名称</label>
                      <input type="text" class="form-control" id="hostname" placeholder="主机名称">
                    </div>
                    <div class="form-group">
                      <label for="ip">ip地址</label>
                      <input type="text" class="form-control" id="ip" placeholder="ip地址">
                    </div>
                    <div class="form-group">
                      <label for="server_type">主机类型</label>
                      <select class="form-control" id="server_type">
                        <option>web</option>
                        <option>mysql</option>
                        <option>lb</option>
                        <option>proxy</option>
                        <option>cache</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <h5>主机状态</h5>
                      <label class="radio-inline">
                        <input type="radio" name="status" value="yes">在线
                      </label>
                      <label class="radio-inline">
                        <input type="radio" name="status" value="no">不在线
                      </label>
                    </div>
                  </form>
                </div>
                     <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <!-- <button type="button" class="btn btn-primary" id="save">添加</button> -->
                  <input type="submit" class="btn btn-primary" value="添加">
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>主机名称</th>
                <th>ip地址</th>
                <th>服务器类型</th>
                <th>服务器状态</th>
                <th>管理操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <td>1</td>
                <td>server01</td>
                <td>192.168.19.100</td>
                <td>web</td>
                <td>online</td>
                <td>
                  <button class="btn btn-info btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>server02</td>
                <td>192.168.19.101</td>
                <td>mysql</td>
                <td>online</td>
                <td>
                  <button class="btn btn-info btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>server03</td>
                <td>192.168.19.102</td>
                <td>web</td>
                <td>down</td>
                <td>
                  <button class="btn btn-info btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>server04</td>
                <td>192.168.19.103</td>
                <td>lb</td>
                <td>online</td>
                <td>
                  <button class="btn btn-info btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr> -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="/static/js/jquery.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/layer/layer.js"></script>
  <script>
    // 1.请求数据获取后端数据  
    $.ajax({
      // 请求方式  常见get post
      type: "get",
      // 后端请求地址  服务器端
      url: "http://127.0.0.1:3000/hosts",
      // 传给后端的数据
      // data: "data",
      // 数据传输的类型
      dataType: "json",
      // 请求成功之后  调用函数
      success: function (response) {
        // response 服务器返回的信息
        // console.log(response)
        // 调用拼接html字符串 并且追加到页面中
        load_data(response)
        // button渲染之后  再进行绑定事件
        host_delete()
      }
    });
    // 2.拼接模板html标签 追加写入到页面中
    function load_data(data) {
      //  console.log(data)
      // 空字符串
      var tpl = ''
      for (var i = 0; i < data.length; i++) {
        tpl += '<tr>'
        tpl += '<td>' + data[i].id + '</td>'
        tpl += '<td>' + data[i].hostname + '</td>'
        tpl += '<td>' + data[i].ip + '</td>'
        tpl += '<td>' + data[i].type + '</td>'
        tpl += '<td>' + data[i].status + '</td>'
        tpl +=
          '<td><button class="btn btn-info btn-sm">更新</button><button class="btn btn-danger btn-sm">删除</button></td>'
        tpl += '</tr>'
        //  console.log(data[i])
      }
      // console.log(tpl)
      // $('tbody').html(tpl)
      $('tbody').append(tpl)
    }
    // 事件没有绑定到button上  在ajax里的回调函数里调用此函数
    function host_delete() {
      // 删除操作  假删除  只操作前端DOM
      $('.btn-danger').click(function () {
        // confirm 确认框  点击确定返回true
        // if (confirm('确认删除吗?')) {
        // this是js还是jq对象？
        // parent() 方法是谁的方法？ 找父元素
        // 怎么办？
        //询问框
        // console.log(this.innerHTML)
        current_button = $(this)
        layer.confirm('确认删除吗？', {
          btn: ['确定', '取消'] //按钮
        }, function () {
          // this 变化了 这里的this是layer
          // console.log(this)
          // 传输数据给后端服务器  传id过去
          // json-server 删除数据 需要使用到DELETE
          // 获取当前页面的id
          id = current_button.parent().parent().children('td').eq(0).html()
          // alert(id)
          $.ajax({
            // restfull api 风格  
            // GET 获取数据
            // POST 修改数据
            // PUT  添加数据
            // DELETE 删除数据
            // json-server 删除数据的  格式 delete请求方式
            type: "delete",
            url: "http://127.0.0.1:3000/hosts/" + id,
            // data: "{id:"+id+"}",
            dataType: "json",
            success: function (response) {
              console.log(response)
            }
          });

          current_button.parent().parent().remove()
          layer.msg('删除成功', {
            icon: 1
          })
          // 关闭所有layer打开的窗口
          // layer.closeAll()
        }, function () {

        });
        // }
      })
    }
  </script>
</body>

</html>